
// css variables
:root {
  // text
  --text-color: var(--el-text-color-primary);
  --text-color-light: var(--el-text-color-regular);
  --text-color-lighter: var(--el-text-color-secondary);

  // brand
  --brand-color: var(--el-color-primary);

  // background
  --bg-color: var(--el-bg-color);
  --bg-color-rgb: 255, 255, 255;
  --bg-color-soft: #fafafa;
  --bg-color-mute: #f2f2f2;

  // border
  --border-color: var(--el-border-color);
  --border-color-light: var(--el-border-color-lighter);

  // info
  --success-color: var(--el-color-success);
  --warning-color: var(--el-color-warning);
  --danger-color: var(--el-color-danger);

  // header vars
  --header-height: 55px;
  --nav-height: 55px;

  // sidebar
  --vp-sidebar-width-mobile: 320px;
  --vp-sidebar-width-small: 266px;
  --sidebar-width: 260px;

  // z-index
  --nav-z-index: 12;
  --sidebar-z-index: 11;

  // tip block
  --block-tip-bg-color: rgba(var(--el-color-primary-rgb), 0.1);
  --block-warning-bg-color: rgba(var(--el-color-warning-rgb), 0.1);
  --block-danger-bg-color: rgba(var(--el-color-danger-rgb), 0.1);
  --block-info-bg-color: rgba(var(--el-color-success-rgb), 0.1);

  // link bg
  --link-active-bg-color: rgba(var(--el-color-primary-rgb), 0.1);

}
